<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        /*#top,header,nav,main,footer,div{*/
        /*    border:1px solid red;*/
        /*!*    设置边框的颜色和宽度*!*/
        /*}*/
        /*top,header,nav,main,footer分别表示顶部，标题，导航栏，主题内容，底部通过这个框架来设计网站*/
        /*该操作是将各类的组件选中显示出边框，方便调整*/
        body{
            width:1024px;
            margin:0px auto;
        /*设置其宽度，上下边距0 并且自动居中*/
        }
        #top{
            display:flex;  /*弹性盒子*/
            justify-content: space-between; /*横轴的对齐方向，均匀分布*/
            border-bottom: 1px solid grey;  /*在top的div的底部设置一条灰线*/
        }
        header{
            display:flex;
            align-items: center;  /*利用弹性盒子的横轴排列，垂直对齐方向居中*/
        }
        /*搜索框*/
        input[type=search]{
            width:400px;
            height:40px;
        }
        /*提交按钮*/
        input[type=submit]{
            height:40px;
            background-color: orange;
        }
        /**nav start from w3cschool*/
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid #e7e7e7;
            background-color: #f3f3f3;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #ddd;
        }

        li a.active {
            color: white;
            background-color: #4CAF50;
        }
        /**nav end from w3cschool*/
        .item{
            width: 200px;
            /*border-bottom: 1px solid grey;*/
            border: 1px solid grey;
        }
        #content{
            display: flex;
            flex-wrap: wrap;
            /*justify-content: space-between;*/
            /*justify-content: space-between;*/
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
        }
        .pagination{
            display: flex;
            justify-content: flex-end;
        }
        footer{
            display: flex;
            flex-direction: column;
            align-items: center;
            border-top: grey;
        }
    </style>
</head>

<body onload="setActiveElement(${homeData.curPage},${homeData.sort})">
<%--顶部栏，由于购物车要在最后边显示所以把登录注册放在一个div里面整体设置--%>
<div id="top">
    <div>


        <c:if test="${user==null}">
            <a href="login.jsp">登录</a>
            <a>注册</a>
        </c:if>
        <c:if test="${user!=null}">
            <span>欢迎您${user.usr}</span>
            <a href="#">退出</a>
        </c:if>
    </div>
    <a id="top-car">购物车</a>
</div>
<%--标题部分--%>
<header>
<%--alt表示如果图片加载不出来显示的内容--%>
    <img alt="" src="image/logo.png">
    <form action="${pageContext.request.contextPath}/HomePageServlet">
        <input type="search" placeholder="输入搜索内容" name="search_text">
        <input type="submit">
    </form>
</header>
<%--导航栏部分--%>
<nav>
    <ul>
        <li><a id="sort0" href="${pageContext.request.contextPath}/HomePageServlet?sort=0">主页</a></li>
        <li><a id="sort3" href="${pageContext.request.contextPath}/HomePageServlet?sort=3">书籍</a></li>
        <li><a id="sort1" href="${pageContext.request.contextPath}/HomePageServlet?sort=1">食品</a></li>
        <li><a id="sort2" href="${pageContext.request.contextPath}/HomePageServlet?sort=2">电器</a></li>
    </ul>
</nav>
<%--主体部分--%>
<main>
    <div id="content">
<%--jstl的for循环使用--%>
        <c:forEach var="list" items="${homeData.commodity}">
            <div class="item">
                <img alt="" src="${list.imgPath}">
                <h3>${list.info}</h3>
                <div>${list.price}<button onclick="addToCart(${list.id})">加入购物车</button></div>
            </div>
        </c:forEach>
<%--页码部分--%>
    </div>
    <div class="pagination">
    <a href="#">«</a>
        <c:forEach var="i" begin="${homeData.navigateFirstPage}" end="${homeData.navigateLastPage}">
            <a id= "${i}" href="${pageContext.request.contextPath}/HomePageServlet?search_page=${homeData.keyWord}&curPage=${i}">${i}</a>
        </c:forEach>
    <a href="#">»</a>
    </div>
</main>
<%--底部部分--%>
<footer>
    <div>©信息技术学院 计科B19-9 2110106 </div>
    <div>沪ICP备11023366号-2   沪公网安备31011502006292号</div>
</footer>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>